import React from 'react'
import PropTypes from 'prop-types'
import { Table, Icon, Input, Tag, Form, message } from 'antd'
import classnames from 'classnames'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import styles from './List.less'
import Items from './Items'

const FormItem = Form.Item



class RenderItems extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: ''
    }
  }

  handleOnChange = (e) => {
    this.setState({
      name: e.target.value
    })
  }

  handleOnPressEnter = () => {
    if (!this.state.name) {
      message.error("亲，输入之后再回车~")
      return
    }
    let data = {
      name: this.state.name,
      parentId: this.props.value
    }
    this.props.addDictionaryItems(data).then(() => {
      this.setState({
        name: ''
      })
    })

  }


  render() {
    const { value, records } = this.props
    if (records.items.length === 0) {
      return (
        <Input value={this.state.name} onPressEnter={this.handleOnPressEnter} onChange={this.handleOnChange} size="small" style={{ width: 100 }} placeholder="回车提交" />
      )
    } else {
      return records.items.map((item, index) => {
        if (records.items.length - 1 === index) {
          return (
            <div style={{ display: "inline-block" }}>
              <Items key={item.id} {...item} updateItems={this.props.updateDictionaryItems} deleteItem={this.props.deleteDictionaryItems} />
              <Input value={this.state.name} onPressEnter={this.handleOnPressEnter} onChange={this.handleOnChange} size="small" style={{ width: 100 }} placeholder="回车提交" />
            </div>
          )
        } else {
          return (<Items key={item.id} {...item} updateItems={this.props.updateDictionaryItems} deleteItem={this.props.deleteDictionaryItems} style={{ display: "inline-block" }} />)
        }
      })
    }
  }
}


const DataDictionaryList = ({
  isMotion,
  updateDictionaryItems,
  deleteDictionaryItems,
  addDictionaryItems,
  ...tableProps
}) => {

  const columns = [
    {
      title: '一级类型',
      dataIndex: 'name',
      key: 'name',
    }, {
      title: '二级类型',
      dataIndex: 'id',
      key: 'id',
      render: (value, records) => <RenderItems addDictionaryItems={addDictionaryItems} updateDictionaryItems={updateDictionaryItems} deleteDictionaryItems={deleteDictionaryItems} value={value} records={records} />
    },
  ]

  const AnimateBody = (props) => {
    return <AnimTableBody {...props} />
  }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  return (
    <Table
      {...tableProps}
      className={classnames(styles.table)}
      columns={columns}
      simple
      components={{
        body: { wrapper: isMotion ? AnimateBody : CommonBody },
      }}
    />
  )
}

DataDictionaryList.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  location: PropTypes.object,
}

export default DataDictionaryList
